<!--
 * @Author: your name
 * @Date: 2021-09-23 15:52:35
 * @LastEditTime: 2021-10-08 12:21:49
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \web-demo\src\components\model-dialog.vue
-->
<template>
  <div>
      <!-- 
      :custom-class="customClass"
      :top="dialogTop" -->
      <!-- :append-to-body="true" -->
      <!-- :title="title" -->
    <el-dialog
      v-model="show"
      :width="dialogWidth"
      :before-close="handleClose"
    >
      <template #title>
        <div class="el-dialog__title">
          <slot name="header"></slot>
        </div>
      </template>
      <slot name="test"></slot>
      <template #footer>
        <div class="dialog-footer">
          <slot name="btns"></slot>
          <el-button v-if="showDialogBtns" @click="handleClose">{{cancel}}</el-button>
          <el-button
            class="loading"
            v-if="showDialogBtns"
            type="primary"
            @click="handleOk"
            >{{confirm}}</el-button
          >
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { ref, watch } from "vue";
export default {
  name: "Modal",
  props: {
    visible: Boolean,
    dialogWidth: {
      type: String,
      default: () => '1000px'
    },
    showDialogBtns: {
      type: Boolean,
      default: () => true
    },
    cancel: {
      type: String,
      default: () => '取消'
    },
    confirm: {
      type: String,
      default: () => '确认'
    },
    title: String
  },
  setup(props, context) {
    // const modelDialog = inject("modelDialog");
    // console.log(props.title)
    const show = ref(props.visible);
    const handleClose = () => {
      context.emit('onClose')
    }

    const handleOk = () => {
      context.emit('onOk')
    }
    watch(() => props.visible, (val) => {
      console.log("父组件监听visible:", val)
      show.value = val;
    })

    return {
      show,
      handleClose,
      handleOk
    };
  },
};
</script>

<style scoped>
.animated {
  animation-duration: 0.4s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>
